<template>
  <div>
    <router-view />
    <van-tabbar v-model="active" fixed border active-color="#00bb86" inactive-color="#999" route placeholder safe-area-inset-bottom>
      <van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :to="item.to">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.inactive : item.icon.active" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'Main',
    data() {
      return {
        active: 0,
        tabbarData: [
          {
            title: '书架',
            icon: {
              active: require('../assets/images/bookshelf.png'),
              inactive: require('../assets/images/bookshelf_active.png')
            },
            to: {name: 'Bookshelf'}
          },
          {
            title: '书城',
            icon: {
              active: require('../assets/images/bookcity.png'),
              inactive: require('../assets/images/bookcity_active.png')
            },
            to: {name: 'BookCity'}
          },
          {
            title: '发现',
            icon: {
              active: require('../assets/images/find.png'),
              inactive: require('../assets/images/find_active.png')
            },
            to: {name: 'Find'}
          },
          // {
          //   title: '我的',
          //   icon: {
          //     active: require('../assets/images/user.png'),
          //     inactive: require('../assets/images/user_active.png')
          //   },
          //   to: {name: 'User'}
          // },
          {
            title: '分类',
            icon: {
              active: require('../assets/images/class.png'),
              inactive: require('../assets/images/class_active.png')
            },
            to: {name: 'Class'}
          }
        ]
      }
    }
  }
</script>

<style lang="less" scoped>

</style>